<template>
  <div class="datasets flex flex-col items-center"
       v-loading="loading">
    <el-form class="w-full">
      <el-form-item label="Filter">
        <el-input prefix-icon="el-icon-search"
                  v-model="form.name"
                  placeholder="Search"></el-input>
      </el-form-item>

    </el-form>
    <Item v-for="(record,index)  in currentList"
          :key="index"
          :title="record.name"
          :desc="record.description"
          @selected="handleSelected(record)"
          :active="isActive(record)"
          :extra="record" />
    <el-pagination layout="prev, pager, next"
                   :hide-on-single-page="true"
                   :page-size="pagination.limit"
                   :current-page.sync='pagination.page'
                   @current-change="currentChange"
                   :total="pagination.total">
    </el-pagination>

  </div>
</template>

<script>
import Item from './item.vue'
export default {
  name: 'Datasets',
  components: {
    Item
  },
  props: {
    value: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      loading: false,
      list: [],
      cloneList: [],
      currentList: [],
      form: {
      },
      pagination: {
        page: 1,
        limit: 5,
        total: 0
      }
    }
  },
  created () {
    this.getDatasets()
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    list: {
      handler (val) {
        this.pagination.total = val.length
        this.currentChange()
      },
      immediate: true
    },
    'form.name' (val) {
      this.list = this.cloneList.filter(i => !val || i.name.toLowerCase().indexOf(val.toLowerCase()) !== -1)
    }
  },
  methods: {
    handleCancel () {
      this.currentValue = []
      this.$emit('cancel', this.currentValue)
    },
    handleSave () {
      this.$emit('success', this.currentValue)
    },
    isActive (record) {
      return this.currentValue.some(i => i.id === record.id)
    },
    handleSelected (record) {
      const { findIndex } = this._
      const index = findIndex(this.currentValue, ['id', record.id])
      if (index !== -1) {
        this.currentValue = this.currentValue.filter(i => i.id !== record.id)
      } else {
        this.currentValue = this.currentValue.concat(record)
      }
    },
    currentChange () {
      const { page, limit } = this.pagination
      this.currentList = this.list.slice((page - 1) * limit, page * limit)
    },
    async getDatasets () {
      try {
        this.loading = true
        const { get, cloneDeep } = this._
        const { getDatasetListForApi } = this.$interface.reports
        const params = {
          queryType: 'REFRESHCACHE',
          internal: false,
          showAllIntegration: false
        }

        let { data: response } = await getDatasetListForApi(params)
        if (response.code !== 0) {
          throw get(response, 'msg')
        }
        this.list = get(response, 'data', [])
        this.cloneList = cloneDeep(get(response, 'data', []))
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.datasets {
  height: 610px;
}
</style>
